<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="renderer" content="webkit">
  <title>临安区公共机构资源能耗系统</title>
  <style>
    @keyframes cc {
      0% {
        opacity: 0.4;
        transform: scale(0.1);
        top: -500px;
      }
      50% {
        opacity: 0.4;
        transform: scale(0.1) rotateX(90deg);
        top: -50px;
      }
      100% {
        opacity: 1;
        transform: scale(1) rotateX(0deg);
        top: 0;
      }
    }

    @media only screen and (max-width: 500px) {
      .login {
        width: 95%!important;
      }
      .sr {
        padding: 30px 70px!important;
      }
    }

    html,
    body {
      height: 100%;
      width: 100%;
      box-sizing: border-box;
      background: url(./static/loginbg1.jpg) no-repeat center center;
      background-size: 100% 100%;
      perspective: 500px;
    }

    * {
      margin: 0;
      padding: 0;
    }

    .login {
      width: 450px;
      position: relative;
      top: 0;
      margin: 15% auto;
      background: rgba(255, 255, 255, 1);
      border-radius: 10px;
      color: #27d;
      animation: cc 1.5s ease-in-out;
    }

    .login header {
      padding: 10px;
      border-bottom: 1px solid #27d;
    }

    .long-img {
      width: 25px;
      height: 25px;
    }

    .login header h1 {
      margin: 0;
      padding: 0;
      text-align: center;
      font-size: 25px;
      line-height: 40px;
    }

    .sr {
      padding: 30px 90px;
    }

    .name {
      position: relative;
      margin-bottom: 20px;
      clear: both;
      border: 1px solid #27d;
      width: 100%;
      height: 40px;
    }

    .name label {
      position: absolute;
      top: 7px;
      left: 5px;
    }

    .name_inp {
      padding-left: 45px;
      height: 38px;
      line-height: 38px;
      line-height: 36px\9;
      border: none;
      background-color: #fff;
      font-size: 16px;
      outline: none;
      width: 225px;
    }

    .dl {
      width: 150px;
      height: 40px;
      background: #27d;
      line-height: 40px;
      display: block;
      margin: 0 auto;
      color: #fff;
      border: 0;
      font-size: 18px;
    }
  </style>
</head>

<body>
  <div style="height:1px;"></div>
  <div class="login">
    <header>
      <h1>临安区公共机构资源能耗管理系统<br/>登录</h1>
    </header>
    <div class="sr">
      <div class="name">
        <label>
            <img src="./static/userName.png" class="long-img">
				</label>
        <input type="text" placeholder="请输入登录名" class="name_inp" id="userName">
      </div>
      <div class="name">
        <label>
				<img src="./static/password.png" class="long-img" >
				</label>
        <input type="password" placeholder="请输入登录密码" class="name_inp" id="password">
      </div>
      <button class="dl" id="btn">登录</button>
      <div id="promentTitle"></div>
    </div>
  </div>
  <script src="https://cdn.bootcss.com/es6-promise/4.1.1/es6-promise.auto.min.js"></script>
  <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
  <script>
    var btn = document.getElementById("btn");
    btn.onclick = function () {
      var userName = document.querySelector("#userName").value;
      var password = document.querySelector("#password").value;
      if (userName && password) {
        axios.post('http://112.17.112.137:8888/api/User/login', {
          name: userName,
          password: password
        }).then(function (res) {
          console.log(res, '登录返回值')
          if (!res.data.role) return alert('用户权限不足，请联系管理员!')
          const userInfo = JSON.stringify(res.data)
          localStorage.setItem("userInfo", userInfo)
          location.href = 'http://112.17.112.137:8888/index.html'
        }).catch(function (res) {
          console.log(res, '333')
          alert(res.response.data)
        })
      } else {
        alert('用户名或者密码不能为空!')
      }
    }
  </script>
</body>

</html>